<template>
  <FModal ref="FModal" width="800px" header="权限条件控制" @ok="setfieldActionData">
    <el-scrollbar class="default-value-formula-wrapper">
      <div class="default-value-formula-button-wrapper">
        <el-button icon="plus" type="primary" @click="addFormula">增加</el-button>
        <el-button icon="refresh" type="warning">重置</el-button>
      </div>
      <div class="default-value-formula-list-wrapper">
        <template class="default-value-formula-list-item"
                  v-for="(actionFormula, actionIndex) in actionFormulas">

          <div class="default-value-formula-list-item">

            <el-popconfirm title="确定删除吗?" @confirm="remove(actionFormula)">
              <template #reference>
                <el-button icon="delete" size="small" circle/>
              </template>
            </el-popconfirm>

            <div class="title1">如果:</div>
            <div class="body1">
              <el-input type="textarea"
                        @click="() => editFormula(actionFormula.formula)"
                        v-model="actionFormula.formula.formulaTitle" readonly/>
            </div>
            <div class="title2">则为:</div>
            <div class="body2">
              <el-radio-group
                  @change="() => authChange(actionFormula)"
                  v-model="actionFormula.auth">
                <el-radio label="browse">浏览</el-radio>
                <el-radio label="edit">编辑</el-radio>
                <el-radio label="hide">隐藏</el-radio>
              </el-radio-group>

              <el-checkbox v-model="actionFormula.notNull"
                           :disabled="actionFormula.auth !== 'edit'"
                           style="margin-left: 30px" true-label="1" false-label="0">
                必填
              </el-checkbox>
            </div>
          </div>

          <el-divider v-show="actionIndex < actionFormulas.length "/>
        </template>
      </div>
    </el-scrollbar>
    <FormulaEditor ref="FormulaEditor"/>
  </FModal>
</template>

<script>
import FModal from '@/components/FModal';
import {DefaultActionFormula, DefaultFieldAction, DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import {guid, isEmpty} from '@/utils/CommonUtils';
import FormulaEditor from '@/components/formula/FormulaEditor';

export default {
  name: "DefaultValueFormulaModal",
  components: {
    FModal,
    FormulaEditor,
  },
  data() {
    return {
      originFieldAction: DefaultFieldAction,
      fieldAction: DefaultFieldAction,
      actionFormulas: [],
      formDefinition: DefaultFormDefinition,
    };
  },
  methods: {
    setData(fieldAction, formDefinition) {
      this.formDefinition = formDefinition;
      this.fieldAction = JSON.parse(JSON.stringify(fieldAction));
      this.originFieldAction = fieldAction;
      this.getActionFormulas();
      this.$refs.FModal.open();
    },
    getActionFormulas() {
      this.clearActionFormulas();
      let actionFormulas = this.fieldAction.actionFormulas;
      if (isEmpty(actionFormulas)) {
        this.fieldAction.actionFormulas = actionFormulas = [];
      }
      this.actionFormulas = JSON.parse(JSON.stringify(actionFormulas));
      if (isEmpty(this.actionFormulas)) {
        this.addFormula();
      }
    },
    createEmptyActionFormula() {
      let res = JSON.parse(JSON.stringify(DefaultActionFormula));
      res.id = guid();
      res.formula.id = guid();

      return res;
    },
    addFormula() {
      let temp = this.createEmptyActionFormula();
      temp.auth = this.fieldAction.defaultAuth;
      temp.notNull = this.fieldAction.defaultNotNull;
      this.actionFormulas.push(temp);
    },
    remove(actionFormula) {
      let index = this.actionFormulas.findIndex(a => a === actionFormula);
      this.actionFormulas.splice(index, 1);
    },
    clearActionFormulas() {
      this.actionFormulas = [];
    },
    authChange(actionFormula) {
      if (actionFormula.auth !== 'edit') {
        actionFormula.notNull = '0';
      }
    },
    editFormula(formula) {
      this.$refs.FormulaEditor.setData(this.formDefinition, formula, 'boolean');
    },
    setfieldActionData() {
      let list = this.actionFormulas;
      for (let i = 0; i < list.length; i++) {
        if (isEmpty(list[i].formula.formulaText)) {
          this.$message.warning('请配置公式');
          return;
        }
      }
      this.originFieldAction.actionFormulas = this.actionFormulas;
      this.close();
    },
    close() {
      this.$refs.FModal.close();
      this.clearDatas();
    },
    clearDatas() {
      this.originFieldAction = DefaultFieldAction;
      this.fieldAction = DefaultFieldAction;
      this.actionFormulas = [];
      this.formDefinition = DefaultFormDefinition;
    },
  }
};
</script>

<style scoped>

.default-value-formula-button-wrapper {
  margin-bottom: 20px;
}

.title1, .title2 {
  margin: 0 10px;
}

.body1,
.body2 {
  flex: 0.5;
}

.body2 {
  border: 1px solid rgba(0, 0, 0, .15);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  height: 100%;
}

.default-value-formula-list-item {
  display: flex;
  align-items: center;
  height: fit-content;
  padding-left: 40px;
  padding-right: 10px;
  box-sizing: border-box;
}

.default-value-formula-list-wrapper {
}

.f-modal-small-body .default-value-formula-wrapper {
  height: 500px;
}
</style>
